<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmGraph.js"></script>
		<script type="text/javascript" src="../dist/jmGraph.min.js"></script>	-->
		<style>
		html,body {
			margin:0;
			padding:0;
			width:100%;
			height:100%;
			overflow: hidden;
		}
		#mycanvas {
			background-color:#000;
			position: absolute;
			width: 100%;
			height: 100%;
		}
		</style>
		
	</head>
	<body >
		<div id="mycanvas">
			</div>	
		
	</body>
</html>

<script type="module">
	import jmGraph from "../index.js";

	//初始化jmgraph
	var graph = new jmGraph('mycanvas');
	
    var arcStyle = {				
        lineWidth:1,
        stroke: 'green',
        close:true
    };
    var radius = 50;
    var center1 = {
        x: 400,
        y: 400
    };		
    var arc1 = graph.createShape('circle',{
        style: arcStyle,
        center: center1,
        radius: radius,
        anticlockwise: false
    });
    graph.children.add(arc1);

    var center2 = {
        x: center1.x,
        y: center1.y + radius * 2
    };		
    var arc2 = graph.createShape('circle',{
        style: arcStyle,
        center: center2,
        radius: radius,
        anticlockwise: false
    });
    graph.children.add(arc2);

    var heartStyle = {
        stroke: 'red',
        lineWidth: 2
    };
    const heartStart = {
                x: center1.x,
                y: center1.y + radius
            };
    var heart = graph.createShape('path',{
        style: heartStyle,
        points: [heartStart]
    });
    graph.children.add(heart);
    
    var r = 0;
    const startX = center1.x;
    const startY = center1.y;
    function goTrack() {
        
        const l = 2 * radius * Math.sin(r) * 2;
        const ox = Math.cos(r) * l;
        const oy = Math.sin(r) * l;
        center1.x =  startX - ox;
        center1.y = startY + oy;

        const heartPoint = {
            x: center1.x + radius * Math.cos(4 * r - Math.PI/2),
            y: center1.y - radius * Math.sin(4 * r - Math.PI/2)
        }
        heart.points.push(heartPoint);

        graph.redraw();

        if(r >= Math.PI) {
            r = 0;
            heart.points = [heartStart];
        }

        r += 0.02;

        

        setTimeout(goTrack, 10);
    }

    goTrack();
</script>